<template>
  <div ref="chart" style="height: 100%; width: 100%"></div>
</template>
<script>
export default {
  props: {
    unit: {
      type: String,
      default: '%',
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 10,
    },
    splitNumber: {
      type: Number,
      default: 10,
    },
    name: {
      type: String,
      default: '溶解氧',
    },
    data: {
      type: Array,
    },
  },
  methods: {
    init() {
      // var chartDom = document.getElementById('main')
      var chartDom = this.$refs.chart
      var myChart = this.$echarts.init(chartDom)
      const vm = this;
      var option = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: this.min,
            max: this.max,
            splitNumber: this.splitNumber,
            itemStyle: {
              color: '#ffbc9f',
            },
            progress: {
              show: true,
              width: 20,
            },

            pointer: {
              show: true,
            },
            axisLine: {
              lineStyle: {
                width: 25,
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 1,
                color: '#dccfcc',
              },
            },
            splitLine: {
              distance: -52,
              length: 5,
              lineStyle: {
                width: 1,
                color: '#dccfcc',
              },
            },
            axisLabel: {
              distance: -25,
              color: '#409eff',
              fontSize: 12,
            },
            anchor: {
              show: false,
            },
            title: {
              show: true,
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 10,
              height: '15%',
              borderRadius: 8,
              offsetCenter: [0, '20%'],
              fontSize: 20,
              fontWeight: 'bolder',
              formatter: `{value} ${this.unit}`,
              color: 'auto',
            },
            data: [
              {
                value: vm.data[0],
                name: vm.name,
              },
            ],
          },
        ],
      }
      let count = 1
      let len = this.data.length;
      setInterval(function () {
        option.series[0].data[0].value = vm.data[count%len];
        count++;
        myChart.setOption(option, true)
      }, 2000)

      option && myChart.setOption(option)
    },
  },
  mounted() {
    this.init()
  },
}
</script>
<style lang="less" scoped>
</style>